<template>
  <div class="children-b-container">
    <span>vuex使用 - 子组件B</span>
    <div class="info">
      <div>数据</div>
      <div>{{$store.state.count}}</div>
      <ul>
        <li>体育:{{ $store.state.sports }}</li>
        <li>装备:{{ equip }}</li>
        <li>肉:{{ meat }}</li>
        <li>快递:{{ msg }}</li>
      </ul>
    </div>
    <div class="control">
      <button @click="add">加</button>
      <button @click="del">减</button>
      <button @click="sex">修改性别</button>
      <button @click="delay">延迟增加数据</button>
      <button @click="delay1">延迟减少数据</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'children-b',
  data () {
    return {
      msg: ''
    }
  },
  computed: {
    equip () {
      return this.$store.state.equip
    },
    ...mapState(['meat'])
  },
  created () {
    this.$eventBus.$on('send', (message) => {
      this.msg = message
    })
  },
  methods: {
    ...mapMutations(['changecount', 'changesex']),
    ...mapActions(['delnum']),
    add () {
      // 后期可以考虑这两个合并成一个方法,就是传值不同,其他的操作一样
      this.$store.commit('changecount', 1)
    },
    del () {
      this.changecount(-1)
    },
    sex () {
      this.changesex()
    },
    // 延迟修改数据,也可以使用辅助函数,减少代码量
    // 如果name做,可以直接写,this.addnum()
    delay () {
      this.$store.dispatch('addnum')
    },
    delay1 () {
      this.delnum()
    }
  }
}
</script>

<style lang="less">
.children-b-container {
  height: 40vh;
  width: 30vw;
  background-color: deepskyblue;
  padding: 15px;
  margin-left: 50px;
  h2 {
    margin: 20px;
    margin-top: 0;
    color: white;
  }
  .control {
    padding: 10px;
    button {
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
      &:hover {
        background-color: #e7e7e7;
      }
    }
  }
}
</style>
